<template>
  <div class="app-container">
    <el-row class="search">
      <el-select v-model="query.t" style="margin-right: 8px; width: 120px" placeholder="日期类型">
        <el-option v-for="item in [
          { label: '入院日期', value: '入院日期' },
          { label: '出院日期', value: '出院日期' },
        ]" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

      <el-date-picker v-model="query.stime" style="width: 150px" type="date" placeholder="开始" value-format="yyyy-MM-dd">
      </el-date-picker>
      <span>-</span>
      <el-date-picker style="width: 150px" v-model="query.etime" type="date" placeholder="结束" value-format="yyyy-MM-dd">
      </el-date-picker>

      <el-select v-model="query.deptValue" style="margin-right: 8px; margin-left: 8px; width: 120px" placeholder="科室">
        <el-option v-for="item in deptLs" :key="item.value" :label="item.text" :value="item.value">
        </el-option>
      </el-select>

      <el-input v-model="query.s" prefix-icon="el-icon-search" style="width: 250px" :placeholder="searchText"
        @keyup.enter.native="search"></el-input>

      <el-button type="warning" style="margin-left: 8px" @click="search" round>搜&nbsp;&nbsp;索</el-button>
    </el-row>

    <el-row>
      <el-table :data="
        ls2.slice(
          (disePathsPage - 1) * disePathsSize,
          disePathsPage * disePathsSize
        )
      " style="width: 100%" v-loading="isLoading" @row-dblclick="row_dblclick" highlight-current-row
        @sort-change="sort_change">
        <el-table-column v-for="item in cols" :key="item" :label="item" :prop="item" fixed show-overflow-tooltip
          sortable>
        </el-table-column>

        <el-table-column prop="病例数" sortable label="总病例数">
        </el-table-column>
        <el-table-column prop="入组数" label="入组数" sortable>
        </el-table-column>
        <el-table-column label="入组率">
          <template scope="scope">
            {{
                ((scope.row.入组数 / scope.row.病例数) * 1.0 * 100).toFixed(2)
            }}%
          </template>
        </el-table-column>

        <el-table-column prop="总权重" label="总权重" sortable>
        </el-table-column>
        <el-table-column prop="CMI" label="CMI" :formatter="fmt" sortable>
        </el-table-column>
        <el-table-column prop="时间消耗" label="时间消耗指数" :formatter="fmt" sortable>
        </el-table-column>
        <el-table-column prop="费用消耗" label="费用消耗指数" :formatter="fmt" sortable>
        </el-table-column>
        <el-table-column prop="评价例数" label="评价例数" sortable>
        </el-table-column>
        <el-table-column label="评价占比">
          <template scope="scope">
            {{
                ((scope.row.评价例数 / scope.row.病例数) * 1.0 * 100).toFixed(2)
            }}%
          </template>
        </el-table-column>

        <el-table-column label="平均得分" sortable>
          <template scope="scope">
            {{
                ((scope.row.得分 / (scope.row.评分人次 || 1)) * 1.0).toFixed(2)
            }}
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination @size-change="disePathsbasicCostHandleSizeChange"
          @current-change="disePathsbasicCostCurrentChange" :current-page="disePathsPage"
          :page-sizes="[5, 10, 20, 50, 100, 200, 300, 400]" :page-size="disePathsSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </el-row>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Format } from "@/utils/Utils";
import { dept } from "@/api/patient";
import { costLs } from "@/api/report";
@Component({
  name: "edtp",
})
export default class extends Vue {
  //private grp = "分组编码,分组名称";
  private query = {
    stime: "",
    etime: Format("yyyy-MM-dd", new Date()),
    s: "",
    grp: "科室,医生",
    size: "1000",
    o: "病例数",
    deptValue: "",
    x: "DESC",
    order: "",
    w: "",
    t: (<any>window).MyConf["DataType"] || "出院日期",
  };

  private total = 0;
  private disePathsSize = 10;
  private disePathsPage = 1;
  private disePathsbasicCostHandleSizeChange(val: number) {
    this.disePathsSize = val;
    this.disePathsPage = 1;
  }
  private disePathsbasicCostCurrentChange(val: number) {
    this.disePathsPage = val;
    //this.selectRow();
  }

  private row_dblclick(r: any) {
    this.$router.push({
      path: "/clinicalpathway/user",
      query: {
        deptValue: r.科室,
        doctorValue: r.医生,
        t: this.query.t,
        stime: this.query.stime,
        etime: this.query.etime
      },
    });
  }

  private sort_change(r: any) {
    let tmps = JSON.parse(JSON.stringify(this.ls));
    tmps.sort((a: any, b: any) => {
      let v = a[r.prop] - b[r.prop];
      if (!r.order.startsWith("asc")) {
        v *= -1;
      }
      return v;
      //return a[r.prop] - b[r.prop];
    });

    this.ls2 = tmps;
    //this.disePathsPage = 1;
  }
  private fmt(row: any, col: any, val: number) {
    if (!val) return "";

    return val.toFixed(2);
  }
  private IsRed(v1: number, v2: number) {
    let r = (v1 / v2) * 1.0;

    if (r > 1.2) return true;

    return false;
  }
  private 比例(v1: number, v2: number, c: string) {
    let r = (v1 / v2) * 1.0;

    if (r == Infinity) {
      return "∞";
    }

    if (isNaN(r)) {
      return "";
    }
    return r.toFixed(2);
  }

  // private fmt(row: any, col: any, val: any) {
  //   if (!val) return val;

  //   return val.toFixed(2);
  // }
  private deptLs: Array<any> = [];

  public async dept() {
    let curDate = new Date();
    let t = `${Format("yyyyMMddh", curDate)}${parseInt(
      curDate.getMinutes() / 5 + ""
    )}`;
    let d: any = await dept({ t: t });
    d = d.data || [];
    this.deptLs = [
      { text: "所有科室", value: "" },
      ...d.map((it: any) => ({ text: it, value: it })),
    ];
  }

  private search() {
    this.disePathsPage = 1;
    this.costLs();
    // this.costLs();
  }
  private created() {
    let cDate = new Date();
    let m =
      cDate.getMonth() - parseInt((<any>window).MyConf["TIMEINTERVAL"] || "1");
    cDate.setMonth(m);
    this.query.stime = Format("yyyy-MM-dd", cDate);

    this.cols = this.grps[this.grpIndex].split(",");
    this.grpChange();

    this.dept();

    this.costLs();
  }

  private ls: Array<any> = [];
  private ls2: Array<any> = [];
  private cols: Array<any> = this.query.grp.split(",");

  private searchText = "";
  private grpChange() {
    this.searchText = this.query.grp
      .split(",")
      .map((it: string) => `${it}`)
      .join("、");
  }

  private isLoading: boolean = true;
  private async costLs() {
    this.isLoading = true;

    // if (!this.grp || this.grp.length == 0) return;

    this.query.grp = this.query.grp;

    this.query.order = `${this.query.o} ${this.query.x}`;

    // if (!this.query.w) this.query.w = "1=1";
    this.query.w = "1=1";
    if (this.query.deptValue) {
      this.query.w += ` AND 科室='${this.query.deptValue}'`;
    }
    //分组编码不能为空
    // if (this.query.w.indexOf("分组编码") < 0) {
    //   this.query.w = "分组编码 IS NOT NULL AND " + this.query.w;
    // }
    if (this.query.s) {
      let p = this.cols
        .map((it: any) => `${it} like '${this.query.s}'`)
        .join(" OR ");
      this.query.w += ` AND (${p})`;
    }

    let q = JSON.parse(JSON.stringify(this.query));
    q.stime = q.stime + " 00:00:00";
    q.etime = q.etime + " 23:59:59";
    let d: any = await costLs(q);

    d = d.data;
    this.ls = d;
    this.ls2 = JSON.parse(JSON.stringify(this.ls));
    this.total = d.length;
    this.isLoading = false;
  }

  private grps: Array<any> = ["科室,医生"];

  private grpIndex = 0;

  private IsBlue(v1: number, v2: number) {
    let r = (v1 / v2) * 1.0;

    if (r < 0.8) return true;

    return false;
  }
}
</script>

<style lang="scss">
.red {
  color: red;
}

.blue {
  color: blue;
}
</style>